<template>
  <view class="layout-page bg-panel-1" :style="themeStyle">
    <v-header>
      <template #title>
        {{$t('assets.e5')}}
        <span class="color-theme-1">{{coin}}</span>
      </template>
    </v-header>
    <view class="layout-main p-x-lg">
      <view class="coin p-md d-flex justify-between bg-panel-3 m-y-md rounded-md box-shadow" @click="coinListShow=true">
        <view class="fn-lg color-light">{{coin}}</view>
        <view>
          <van-icon name="arrow" />
        </view>
      </view>
      <view class="m-y-md rounded-md overflow-hidden">
        <view class="bg-panel-3 rounded-md box-shadow">

          <view
            class="d-flex  justify-between align-center border-b p-x-md p-y-xs color-light"
            v-if="coin=='USDT'"
          >
            <span>{{$t('assets.b7')}}</span>
            <view class="group d-flex fn-12 color-light">
          
              <view class="rounded-md color-plain p-x-sm p-y-xs  m-r-sm"
                size="mini"
				v-for="(item,index) in ltype"
				:key="index"
                @click="changeRechargeType(item)"
                :class="rechargeType==item?'bg-gradient-green':'bg-gray-7'"
              >{{item}}</view>
			  
			  <!-- <view class="rounded-md color-plain  p-x-sm p-y-xs m-r-sm"
			    :class="rechargeType==1?'bg-gradient-green':'bg-gray-7'"
			    size="mini"
			    @click="changeRechargeType(1)"
			  >OMNI</view>
			  
              <view class="rounded-md color-plain p-x-sm p-y-xs"
                size="mini"
                @click="changeRechargeType(3)"
                :class="rechargeType==3?'bg-gradient-green':'bg-gray-7'"
              >TRC20</view> -->
            </view>
          </view>
          <view class="p-t-md  p-b-md ">
            <view class="fn-center">
              <v-qr v-if="form.address" class="qr-box" :text="form.address||' '"></v-qr>
            </view>
            <view class="tips fn-center color-light m-y-xs">{{$t('assets.e6')}}</view>
          </view>
        </view>
        <view class="info m-t-md p-md bg-panel-3 rounded-md box-shadow">
          <view class="address d-flex align-center justify-between p-t-xs">
            <view class="label w-100">{{$t('assets.e7')}}</view>
            <view class="border-r address-txt p-x-xs flex-fill color-light fn-right">{{form.address}}</view>
            <view class="color-theme-1 p-x-xs fn-18" @click="$copy(form.address)">
              <i class="iconfont">&#xe706;</i>
            </view>
          </view>
          <view class="address d-flex align-center justify-between p-t-xs m-b-md">
            <view class="label w-100">{{$t('assets.e8')}}</view>
            <v-input
              type="number"
              class="border-b flex-fill fn-right p-y-xs color-light"
              v-model="form.amount"
            />
			
	
			
			
          </view>
		  <view class="address d-flex align-center justify-between p-t-xs m-b-md">
		    <view class="label w-100">{{$t('otc.g1')}}</view>
			<view
		     @click="getFile('img')"
		     class="upload-box d-flex justify-center align-center rounded-sm  bg-panel-3 box-shadow"
		   >
		     <van-icon v-if="!form.img" class="color-light fn-30" name="photograph" />
		     <img v-else :src="form.img" alt />
		   </view>
		  			
		  	
		  			
		  			
		  </view>
		  
		
          <v-button type="theme" block class="w-max m-t-md" @click="recharge" ref="btn">{{$t('common.confirm')}}</v-button>
        </view>
        <view class="m-y-md bg-panel-3 rounded-md box-shadow">
          <ul class=" p-xs fn-sm rounded-md m-y-xs">
            <li>·{{$t('assets.f0')}}。{{$t('assets.f1',{num:10,name: coin })}}。</li>
            <li>·{{$t('assets.f3',{name:coin})}}。</li>
          </ul>
        </view>
      </view>
      <view class=" m-b-lg" v-if="list.length">
        <view class="title d-flex justify-between  p-y-xs align-center color-light">
          <span class="fn-lg">{{$t('assets.f4')}}</span>
        </view>
        <view class="">
          <table class="w-max">
            <thead class="p-x-md">
              <tr class="fn-sm p-x-md " >
                <th class=" p-b-md fn-left p-l-md">{{$t('assets.c9')}}</th>
                <th class=" p-b-md fn-left">{{$t('assets.d0')}}</th>
                <th class=" p-b-md fn-right p-r-md">{{$t('assets.c0')}}</th>
              </tr>
            </thead>
            <tbody>
              <tr class="color-light trChange p-x-md"  v-for="(item) in list" :key="item.id">
                <td class="p-y-xs p-l-md rounded-tl-sm rounded-bl-sm">{{item.datetime|parseTime}}</td>
                <td >
                  <view v-if="item.status==0">{{$t('assets.d1')}}</view>
                  <view v-if="item.status==1" class="color-buy">{{$t('assets.d2')}}</view>
                  <view v-if="item.status==2" class="color-sell">{{$t('assets.d3')}}</view>
                </td>
                <td class="fn-right p-r-md rounded-tr-sm rounded-br-sm">
                  {{item.amount}}
                  <span class="color-default">({{item.coin_name}})</span>
                </td>
              </tr>
              <tr v-if="loadMore">
                <td colspan="3" class="fn-center p-xs link-active" @click="more">{{$t('assets.d4')}}</td>
              </tr>
            </tbody>
          </table>
        </view>
      </view>
    </view>
    <coin-list ref="coinList" v-model="coin" @close="coinListShow=false" v-show="coinListShow" />
    <van-toast id="van-toast" />
	<van-dialog id="van-dialog" />
  </view>
</template>
<script>
import coinList from "./coin-list";
import Wallet from "@/api/wallet";
import Member from "@/api/member";
import formData from "@/utils/class/date";
import {mapGetters,mapState} from 'vuex'
export default {
  components: {
    coinList,
  },
  data() {
    return {
      coinListShow: false,
      coin: "",
      rechargeType: 2,
      address: "",
      form: {
        coin_id: "",
        amount: "",
        address: "",
		img:''
      },
      list: [],
      page: 1,
      loadMore: true,
	  clist:[],
	  ltype:[],
    };
  },
  computed: {
	  ...mapState({
	    logoMap: "logoMap",
	  }),
    activeCoin() {
      if (!this.coin) return {};
	    console.log('我变化了 ？'+this.coin)
      return this.$refs.coinList.coinList.find(
        (item) => item.currency == this.coin
      );
    },
    ...mapGetters(['themeStyle'])
  },
  filters: {
    parseTime(val) {
      return formData.parseTime(val);
    },
  },
  watch: {
    coin(n) {
      if (n) {
		  console.log(n,'n----')
		
        this.form.address = "";
        // if (this.coin != "USDT") {
        //   this.rechargeType = 1;
        // }
        // this.walletImage();
		console.log(this.activeCoin,'activeCoin')
		let json=JSON.parse(this.activeCoin.lian_json)
		console.log(json,'json')
			let n=[];
		if(json==null||json=='null'){
			n=[this.activeCoin.currency]
				
		}else{
			for (let var1 in json) {
				n.push(var1);
			}
			
		}
	
		// if(this.activeCoin.lian_type.indexOf(',')!== -1){
		// 	n=this.activeCoin.lian_type.split(',')
		// }else{
		// 	n=[this.activeCoin.lian_type]
		// }
		// n.push()
		this.ltype=n
		
		console.log(n,'选择列表')
		this.form.address=this.activeCoin.card_no
      }
    },
    rechargeType() {
      // 优先清空地址  避免用户充错地址
    },
  },
  onLoad() {
  	this.init()
  },
  methods: {
	  getFile(name) {
	    this.$getFile({count:1}).then((res) => {
	      this.upLoadImg(res, name);
	    })
	  },
	  // 上传图片
	  upLoadImg(chooseImageRes, name) {
	    Member.uploadImage(chooseImageRes).then((res) => {
	      console.log(res)
	      this.form[name] = res.data.url;
	      this.form['img_1'] = res.data.path;
	      this.$toast.success(this.$t('auth.c1'));
	    });
	  },
	init(){
			let data={};
		 Wallet.getPayments(data).then((res) => {
			 console.log(res,'res----')
			 res.data.forEach(e=>{
				 if(e.lian_type.indexOf(',')!== -1){
					 e.lian_array=e.lian_type.split(',')
				 }else{
					 e.lian_array=[e.lian_type]
				 }
			 })
			 this.clist=res.data
			 
			   // this.form.address_type=this.clist[0];
			   
			 console.log(this.clist,'this.clist')
		 })
	},
    changeRechargeType(idx) {
      this.rechargeType = idx;
	
	  	let json=JSON.parse(this.activeCoin.lian_json)
		 
	  	this.form.address=json[idx]
		this.form.address_type=idx
		 console.log(this.form.address,idx)
      // this.form.address = "";
      // this.walletImage();
    },
    // 获取充币地址
    walletImage() {
      let data = {
        coin_id: this.activeCoin.id,
        address_type: this.rechargeType,
      };
      Wallet.walletImage(data).then((res) => {
      		  if(res.message == 'FAILED'){
      			  this.$dialog
      			      .confirm({
      					  title: this.$t("common.error"),
      					  message: this.$t("common.error1"),
						  cancelButtonText: this.$t('common.cancelButtonText'),
						  confirmButtonText:this.$t('common.confirmButtonText'),
      			      })
      			      .then(() => {
      
      			      });
      		  }else{
      			  this.form.address = res.data.address;
      		  }
      }).catch(() => {});
    },
    // 充值
    recharge() {
      this.form.coin_id = this.activeCoin.id;
	  console.log(this.form.address_type,'this.form.address_type')
	  // if(this.form.address_type==''||this.form.address_type=='undefined'||this.form.address_type==undefined){
		 // uni.showToast({
		 // 	title:this.$t('assets.b7'),
			// icon:'none'
		 // })
		 //   return
	  // }
	  if(this.form.amount==''||this.form.amount<=0){
		  uni.showToast({
		  	title:this.$t('otc.b5'),
			icon:'none'
		  })
		  return
		  // this.$toast.error(this.$t('otc.b5')+"！");
	  }
	  if(this.form.img==''){
	  		  uni.showToast({
	  		  	title:this.$t('otc.g1'),
				icon:'none'
	  		  })
			  return
	  		  // this.$toast.error(this.$t('otc.g1')+"！");
	  }
	  if(this.form.address==''){
		  uni.showToast({
		  	title:this.$t('assets.b9'),
			icon:'none'
		  })
		  return
		   // this.$toast.error(this.$t('assets.b9')+"！");
	  }
      Wallet.recharge(this.form, { btn: this.$refs.btn })
        .then((res) => {
			console.log(res,'res---')
			uni.showToast({
				title:this.$t(res.message),
						icon:'none'
			})
          // this.$back();
          // this.$toast.success(this.$t('assets.d5')+"！");
          // this.reset();
        })
        .catch(() => {});
    },
    reset() {
      this.loadMore = true;
      this.page = 1;
      this.depositHistory();
    },
    more() {
      this.page++;
      this.depositHistory();
    },
    // 获取充值记录
    depositHistory() {
      let data = {
        page: this.page,
      };
      Wallet.depositHistory(data).then((res) => {
        if (res.data.current_page == 1) this.list = [];
        this.list = [...this.list, ...res.data.data];
        if (res.data.data.length < res.data.per_page) this.loadMore = false;
      });
    },
  },
  created() {
    this.depositHistory();
  },
};
</script>
<style lang="scss" scoped>
.upload-box {
	  width: 150px;
	  height: 100px;
	  img {
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	  }
	}
.address {
  .label {
    white-space: nowrap;
  }
  .address-txt {
    word-break: break-all;
  }
}
.qr-box {
  height: 150px;
  width: 150px;
  margin: 0 auto;
  border: 4px solid $white;
}
.trChange:nth-child(2n-1){
   box-shadow: $shadow;
    border-radius: $border-radius-xs;
	td{
		background: $panel-3;
		padding-top: $padding-sm;
		padding-bottom: $padding-sm;
	}
}
</style>